iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Modern Web

我的菜很有Vue味~系列 第 19

Day19 Vue元件的命名規則 & 單一元件(SFC)

  • 分享至 

  • xImage
  •  

在元件模板中通常是以「標籤」的形式來做使用,所以在命名上就會有些限制,也是因為必扁與其他標籤名稱產生衝突,在打多數人的認知通常會以兩個以上的單字來命名,如<tode-item><component-layout>等等。

通常我們有兩種命名方式

  • 自首大寫駝峰式命名 (pascal-case)
    "TodeItem" 、 "ComponentLayout" 、 "BaseTable" ...
  • 連字號(kebab-case)的方式來命名。
    "tode-item" 、 "component-layout" 、 "base-table" ...

由於在解析HTML標籤時,並沒有大小寫的差別,所以在命名時就會使用連字號標籤。可以從昨天的例子可以看到我們在HTML裡為什麼使用<my-component>來命名,但是在.vue單一元件的<template>模板中就沒有那麼多限制了。

那什麼是單一元件呢?

在剛剛我們有提到.vue的命名,那.vue是什麼,.vue跟元件很像,指示是以.vue檔案的方式包裝起來,酨透過import的方式引入檔案做子元件使用,所以通常我們稱這樣為Vue的單一元件檔(Single File Components,SFC)。

在一個SFC通常會包含三種東西,第一為HTML模板的<template>、用來定義元件結構與邏輯的<script>與CSS格式的<style>

今天就先到這了,明天見~


上一篇
Day18 Vue元件的宣告與註冊
下一篇
Day20 Vue元件中的網頁模板
系列文
我的菜很有Vue味~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言